<template>
	<el-dialog title="时间设置" :visible.sync="visible" top="0" width="640px">
		<el-form v-bind="formConfig" :model="formData" :rules="formRules" label-width="80px">
			<el-row :gutter="24">
				<el-col :span="24">
					<el-form-item label="考试时间" prop="examTime">
						<el-date-picker v-model="formData.examTime" v-bind="dateRangeConfig" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="考试时长" prop="examDuration">
						<el-input-number v-model="formData.examDuration" controls-position="right" :min="1" />
						<span class="unit">分钟</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="公布成绩" prop="publishTime">
						<el-date-picker v-model="formData.publishTime" v-bind="datetimeConfig" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="开始考试" prop="joinLimited">
						<sw-custom-input size="small" type="number" v-model="formData.joinLimited" class="limit" />
						<span class="unit">分钟后禁止参加考试</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="开始考试" prop="submitLimited">
						<sw-custom-input size="small" type="number" v-model="formData.submitLimited" class="limit" />
						<span class="unit">分钟内不允许交卷</span>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="是否公布答案" prop="publishAnswer" label-width="100px">
						<el-switch v-model="formData.publishAnswer" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :span="7" :offset="150">
					<el-form-item label="是否查看详情" prop="publishHisPaper" label-width="100px">
						<el-switch v-model="formData.publishHisPaper" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :span="7" :offset="150">
					<el-form-item label="是否答案解析" prop="publishAnalysis" label-width="100px">
						<el-switch v-model="formData.publishAnalysis" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" :loading="btnLoading" @click="handleUpdateTime">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import lodash from 'lodash';
import { updateExam } from '@/api/exam/testExam';
export default {
	props: {
		value: { type: Boolean, default: false },
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			visible: this.value,
			formData: {},
			formRules: {
				examTime: [{ required: true, message: '请选择考试时间', trigger: 'change' }],
				examDuration: [{ required: true, message: '请输入考试时长', trigger: 'blur' }],
				publishTime: [{ required: true, message: '请选择公布成绩时间', trigger: 'change' }],
				joinLimited: [{ required: true, message: '请输入考试参加限制时间', trigger: 'blur' }],
				submitLimited: [{ required: true, message: '请输入考试交卷限制时间', trigger: 'blur' }]
			},
			formConfig: {
				ref: 'form',
				size: 'medium',
				class: 'dialog_form_wrapper'
			},
			datetimeConfig: {
				type: 'datetime',
				style: { width: '100%' },
				placeholder: '选择日期时间',
				valueFormat: 'yyyy-MM-dd HH:mm:ss'
			},
			dateRangeConfig: {
				rangeSeparator: '至',
				type: 'datetimerange',
				style: { width: '100%' },
				endPlaceholder: '结束日期',
				startPlaceholder: '开始日期',
				valueFormat: 'yyyy-MM-dd HH:mm:ss'
			},
			btnLoading: false
		};
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.initConfigData(this.data);
		},
		'formData.examTime': {
			handler(arr) {
				this.$set(this.formData, 'startTime', !arr ? '' : arr[0]);
				this.$set(this.formData, 'endTime', !arr ? '' : arr[1]);
			}
		}
	},
	methods: {
		//初始化配置数据
		initConfigData(data) {
			this.formData = lodash.cloneDeep(data);
			if (!!data.startTime && !!data.startTime) {
				this.$set(this.formData, 'examTime', [data.startTime, data.endTime]);
			}
		},

		//更新考试时间请求
		async updateTimeRequest() {
			let params = lodash.omit(this.formData, 'examTime');
			let result = await updateExam(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.$message.success('时间配置成功');
				this.$emit('refresh');
				this.visible = false;
			}
		},

		//更新考试时间
		handleUpdateTime() {
			this.$refs['form'].validate((valid) => {
				if (!valid) return false;
				this.btnLoading = true;
				this.updateTimeRequest();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.dialog_form_wrapper::v-deep {
	.el-input.limit {
		width: 60px;
		.el-input__inner {
			font-size: 14px;
			text-align: center;
		}
	}
	.el-col.el-col-offset-150 {
		margin-left: 6.25%;
	}
}
</style>
